<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <Loading :loading="loading">
      <div class="review-main">
        <van-sticky>
          <div
            class="review-header"
            :class="isWeChatBrowser ? 'review-header-wechat' : ''"
          >
            <div v-if="!isWeChatBrowser" class="review-header-title">
              万利大学直播回放
            </div>
            <van-form @submit="handleGotoList()">
              <van-field
                class="header-input"
                :class="isWeChatBrowser ? 'header-input-wechat' : ''"
                label-width="7.5"
                v-model="videoName"
                placeholder="搜索"
                @blur="handleGotoList()"
              >
                <template #left-icon>
                  <div>
                    <van-icon
                      name="search"
                      size="18"
                      class="search-arrow-left"
                    />
                  </div>
                </template>
              </van-field>
            </van-form>
          </div>
        </van-sticky>
        <!-- 精选主题 -->
        <!-- <div class="review-theme">
          <div class="review-theme-text">精选主题</div>
          <div class="review-theme-text-bottom">
            <div class="review-theme-text-bottom-bg"></div>
          </div>
        </div> -->
        <!-- 回放 -->
        <div class="review-list-item" v-for="item in list" :key="item.index">
          <div
            class="flex-row flex-justify-between flex-align-center page-padding-15"
          >
            <div class="flex-row flex-align-center">
              <img class="review-list-item-icon" src="./img/biaoqian.png" />
              <div class="review-list-item-title">{{ item.videoName }}</div>
            </div>
            <div
              class="review-list-item-more"
              @click="
                handleMenu('/reviewList', {
                  videoType: item.videoType
                })
              "
            >
              更多
            </div>
          </div>
          <van-row class="page-padding-7">
            <van-col
              span="12"
              v-for="ele in item.videoList"
              :key="ele.index"
              @click="handleMenu('/reviewDetail', ele)"
              class="page-padding-col"
            >
              <img :src="ele.videoLogoPath" class="review-list-item-img" />
              <img
                src="./img/yanjing.png"
                alt=""
                class="review-list-item-pic"
              />
              <div class="review-list-item-number">{{ ele.clickNumber }}</div>
              <div class="page-padding-7">
                <div class="review-list-item-desc">{{ ele.videoName }}</div>
                <div class="review-list-item-time">
                  <!-- {{ ele.publishTime }}
                  播放量:{{ ele.clickNumber }} -->
                  <p class="review-list-item-time-text">{{ ele.publishTime }}</p>
                  <p class="review-list-item-time-text">播放量:{{ ele.clickNumber }}</p>
                </div>
                
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </Loading>
  </van-pull-refresh>
</template>
<script>
import API from '@/services/h5/review'
import Loading from '@/components/data-loading'
import { isWeChatBrowser } from '@/config/h5/index.js'

export default {
  components: { Loading },
  data() {
    return {
      isWeChatBrowser,
      Loading: false,
      isLoading: false,
      videoName: '',
      list: [
        {
          label: '主顾开拓',
          data: [
            {
              title: '万利早课-保险责任',
              dateTime: '2021-07-06'
            },
            {
              title:
                '教您三招，检查保险买教您三招，检查保险买教您三招，检查保险买的…',
              dateTime: '2021-07-06'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    async onRefresh() {
      const res = await API.getplayListFisrst()
      if (res && res.data && res.data.code === 1000) {
        this.list = res.data.data
        this.isLoading = false
      } else {
        this.isLoading = false
      }
    },
    async onLoad() {
      this.loading = true
      const res = await API.getplayListFisrst()
      if (res && res.data && res.data.code === 1000) {
        this.list = res.data.data
      }
      this.loading = false
    },
    handleMenu(path, item) {
      this.$router.push({
        path: path,
        query: {
          ...item,
          id: item.id
        }
      })
    },
    handleGotoList() {
      this.$router.push({
        path: '/reviewList',
        query: {
          videoName: this.videoName
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.review-header {
  position: relative;
  font-size: 18px;
  color: #333;
  text-align: center;
  width: 375px;
  height: 95px;
  background: url('./img/navbg.png') no-repeat;
  background-size: cover;
  z-index: 9;
  &-wechat {
    height: 50px;
  }
  .review-header-title {
    padding-top: 15px;
  }
  .header-input {
    position: absolute;
    left: 15px;
    top: 48px;
    width: 345px;
    border-radius: 17px;
    padding: 5.5px 9px;
    background-color: #fff;
    &-wechat {
      top: 8px;
    }
  }
}
// 精选主题
// .review-theme {
//   clear: both;
//   margin: 15px 0;
//   text-align: center;
//   .review-theme-text {
//     font-size: 18px;
//     color: #333;
//     font-weight: bold;
//   }
//   .review-theme-text-bottom {
//     margin-top: 5px;
//     padding: 0 170px;
//     .review-theme-text-bottom-bg {
//       width: 34px;
//       height: 3px;
//       border-radius: 1.5px;
//       background-color: @c-color-primary;
//     }
//   }
// }
// 回放
.review-list-item {
  background: #fff;
  margin-bottom: 13px;
  padding: 15px 0;
  .review-list-item-icon {
    width: 19px;
    height: 21px;
  }
  .review-list-item-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: 6px;
  }
  .review-list-item-more {
    font-size: 14px;
    color: @c-color-primary;
  }
  .review-list-item-desc {
    font-size: 13px;
    color: #666;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .review-list-item-time {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .review-list-item-time-text {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-padding-15 {
    padding: 0 15px;
  }
  .page-padding-7 {
    padding: 0 7px;
  }
  .page-padding-col {
    position: relative;
    padding: 0 7px;
  }
  .review-list-item-img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 211px;
  }
  .review-list-item-pic {
    width: 13px;
    height: 10px;
    position: absolute;
    top: 183px;
    left: 18px;
  }
  .review-list-item-number {
    line-height: 10px;
    font-size: 10px;
    position: absolute;
    top: 183px;
    left: 38px;
    color: #fff;
  }
}
</style>
